<template>
  <div class="log-center-container">
    <a-card>
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="operation" tab="操作日志">
          <div class="log-toolbar">
            <a-select v-model:value="opFilters.resource" placeholder="资源 请选择" style="width: 140px; margin-right: 8px;">
              <a-select-option value="">全部资源</a-select-option>
              <a-select-option value="网站">网站</a-select-option>
              <a-select-option value="文件管理">文件管理</a-select-option>
              <a-select-option value="运行环境">运行环境</a-select-option>
            </a-select>
            <a-select v-model:value="opFilters.status" placeholder="状态 请选择" style="width: 120px; margin-right: 8px;">
              <a-select-option value="">全部状态</a-select-option>
              <a-select-option value="成功">成功</a-select-option>
              <a-select-option value="失败">失败</a-select-option>
            </a-select>
            <a-button @click="$emit('clearOpLogs')" style="margin-right: 8px;">清空日志</a-button>
            <a-input-search v-model:value="opFilters.keyword" placeholder="搜索" style="width: 200px; float: right;" @search="onOpSearch" />
          </div>
          <div class="log-table-title">操作日志</div>
          <!-- 操作日志表格 - 移除分页，添加滚动容器 -->
          <div class="table-scroll-container"> <!-- 添加滚动容器 -->
            <a-table
              :columns="opColumns"
              :data-source="opLogs"
              :loading="opLoading"
              row-key="id"
              bordered
              size="middle"
              :pagination="false"  
              :scroll="{ y: 'calc(100vh - 300px)', x: 'max-content' }" 
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag color="success" v-if="record.status === '成功'">成功</a-tag>
                  <a-tag color="error" v-else>失败</a-tag>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="system" tab="系统日志">
          <div class="log-toolbar">
            <a-input-search v-model:value="sysFilters.keyword" placeholder="搜索" style="width: 200px;" @search="onSysSearch" />
          </div>
          <div class="log-table-title">系统日志</div>
          <!-- 系统日志表格 - 移除分页，添加滚动容器 -->
          <div class="table-scroll-container"> <!-- 添加滚动容器 -->
            <a-table
              :columns="sysColumns"
              :data-source="sysLogs"
              :loading="sysLoading"
              row-key="id"
              bordered
              size="middle"
              :pagination="false" 
              :scroll="{ y: 'calc(100vh - 300px)', x: 'max-content' }" 
            />
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 操作日志表头
const opColumns = [
  { title: '资源', dataIndex: 'resource', key: 'resource' },
  { title: '操作', dataIndex: 'action', key: 'action' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '时间', dataIndex: 'time', key: 'time' }
]
// 系统日志表头
const sysColumns = [
  { title: '内容', dataIndex: 'content', key: 'content' },
  { title: '时间', dataIndex: 'time', key: 'time' }
]

// 过滤条件（删除分页相关配置）
const opFilters = ref({ resource: '', status: '', keyword: '' })
const sysFilters = ref({ keyword: '' })
const opLogs = ref([])
const sysLogs = ref([])
const opLoading = ref(false)
const sysLoading = ref(false)
const activeTab = ref('operation')

// 保留搜索逻辑（删除分页相关方法）
function onOpSearch() {
  // 触发操作日志搜索事件，实际应请求后端
}
function onSysSearch() {
  // 触发系统日志搜索事件，实际应请求后端
}


</script>

<style scoped>
.log-center-container {
  padding: 24px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.log-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.log-table-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* 修改5：添加滚动容器样式（侧面和底部滚动条） */
.table-scroll-container {
  max-height: calc(100vh - 300px);
  overflow: hidden; 
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

/* 修改6：优化表格滚动样式 */
:deep(.ant-table) {
  margin-bottom: 0; 
}
:deep(.ant-table-body) {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
/* 固定表头样式 */
:deep(.ant-table-thead > tr > th) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;  /* 表头背景色，避免滚动时内容穿透 */
  border-bottom: 1px solid #f0f0f0;
}
/* 优化表格单元格边框 */
:deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #f0f0f0;
}
/* 滚动条美化 */
.table-scroll-container::-webkit-scrollbar {
  width: 8px; 
  height: 8px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.table-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .log-center-container {
    padding: 16px; 
  }
  .table-scroll-container {
    max-height: calc(100vh - 280px);
  }
}

@media (max-width: 768px) {
  .log-center-container {
    padding: 12px;
  }
  .log-toolbar {
    flex-wrap: wrap; 
    gap: 8px;
  }
  .log-toolbar > * {
    flex: 1 1 auto;
    margin-right: 0 !important; 
  }
  .a-input-search {
    width: 100% !important; 
    float: none !important;
  }
  .table-scroll-container {
    max-height: calc(100vh - 320px); 
  }
  /* 表格列宽适配 */
  :deep(.ant-table-column-key-resource),
  :deep(.ant-table-column-key-action) {
    width: 30% !important; 
  }
  :deep(.ant-table-column-key-time) {
    width: 40% !important; 
  }
}

@media (max-width: 480px) {
  .log-center-container {
    padding: 8px; 
  }
  .log-table-title {
    font-size: 14px; 
  }
  .table-scroll-container {
    max-height: calc(100vh - 280px);
  }
  /* 系统日志内容列换行 */
  :deep(.ant-table-column-key-content) {
    white-space: normal !important; 
    word-break: break-all; 
  }
}
</style>